<template>
  <div>
    <p class="banner"><img src="../../assets/banner.png" alt="" width="100%"></p>
    <wv-group>
      <wv-input placeholder="帐号，建议使用手机号" type="number" v-model="accountName" :maxlength="11"></wv-input>
      <wv-input placeholder="请设置密码" :type="type" v-model="password">
        <img :src="src" alt="" slot="ft" @click="change">
      </wv-input>
    </wv-group>
    <wv-button type="primary" @click="registerOrlogin"> 注册/登录</wv-button>
    <p class="register">
      <router-link :to="{name:'register',query:this.$route.query}">手机号快速注册</router-link>
    </p>
    <p class="agree" v-show="hidshow">登录即代表同意我们的<span @click="goLookService()">服务协议</span> 和<span
      @click="goLookPrivacy()">隐私政策</span>
    </p>
  </div>

</template>
<script type="text/ecmascript-6">
  import {getStore, setStore, removeStore} from '../../../test/unit/storage'
  import {registerLogin, userInfo} from '../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'login',
    props: {},
    data() {
      return {
        type: 'password',
        src: require('../../assets/bieye.png'),
        accountName: "",
        password: "",
        shareBackUrl: "",
        docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
        showHeight: document.documentElement.clientHeight,   //实时屏幕高度
        hidshow: true  //显示或者隐藏footer
      };
    },
    methods: {
      goLookService() {
        this.$router.push({path: 'service'})
      },
      goLookPrivacy() {
        this.$router.push({path: 'privacy'})
      },
      change() {
        this.type = this.type == 'password' ? 'text' : 'password';
        this.src = this.src == require('../../assets/eye.png') ? require('../../assets/bieye.png') : require('../../assets/eye.png')
      },
      registerOrlogin() {
        let openId = getStore("openId");
        if (this.$myUtils.isNull(openId)) {
          openId = "";
        }
        let params = {
          accountName: this.accountName,
          password: this.password,
          openId: openId
        };
        let goodsId = this.$route.query.goodsId;
        registerLogin(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            let token = res.object.token;
            setStore('token', token);
            if (goodsId) {
              this.$router.push({path: '/jinkadetail', query: {goodsId: goodsId}});
            } else {
              let isHave = res.object.isHave;
              if (isHave) {
                this.$router.push({path: 'index'})
              } else {
                this.$router.push({path: 'cata'})
              }
            }
          } else {
            Toast.fail(res.info)
          }
        })
      }
    },
    created() {
      let token = getStore('token');
      let isEmpty = this.$myUtils.isNull(token);
      let goodsId = this.$route.query.goodsId;
      if (!isEmpty) {
        userInfo({}).then(res => {
          if (res.code == 100) {
            if (goodsId) {
              this.$router.push({path: '/jinkadetail', query: {goodsId: goodsId}});
            } else {
              let isEnable = res.object.isEnable;
              let isHave = res.object.isHave;
              if (isEnable == 1) {
                if (isHave) {
                  this.$router.push({path: 'index'})
                } else {
                  this.$router.push({path: 'cata'})
                }
              } else {
                Toast.fail("您的账户被冻结")
              }
            }
          }
        })
      }
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      }
    },
    watch: {
      showHeight: function () {
        if (this.docmHeight > this.showHeight) {
          this.hidshow = false
        } else {
          this.hidshow = true
        }
      }
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .banner img {
    object-fit: cover;
  }

  .weui-btn_primary {
    background-color: #2e94f0;
    margin-top: 30px;
  }

  button.weui-btn {
    width: 94%;
    margin-top: 30px;
  }

  .weui-btn_primary a {
    color: #fff;
  }

  .register {
    text-align: right;
    padding-right: 15px;
    margin-top: 20px;
  }

  .register a {
    color: #f37670;
  }

  .agree {
    position: fixed;
    bottom: 30px;
    text-align: center;
    width: 100%;
  }

  .agree span {
    color: #2d93f0;
  }
</style>
